<template>
    <div class="swiper_container_template">
        <div class="image-gallery">
            <swiper ref="awesomeSwiperA" :options="swiperOptionA" @set-translate="onSetTranslate">
                <!-- slides -->
                <swiper-slide v-for="(item, index) in imageList" :key="index">
                    <div class="single-slide">
                        <img
                                :src="item.imageUrl"></img>
                        <div class="content-desc">
                            <span class="border-span">FEATURED</span>
                            <span class="content-span main-title">{{item.mainTitle}}</span>
                            <span class="content-span content"> {{item.content}}</span>
                            <a :href="item.linkUrl"><span
                                    class="content-span link-title"> {{item.linkTitle}}></span></a>
                        </div>
                    </div>
                </swiper-slide>

                <!-- Optional controls -->
                <div class="swiper-pagination" slot="pagination"></div>
                <!--  <div class="swiper-button-prev" slot="button-prev"></div>
                  <div class="swiper-button-next" slot="button-next"></div>-->
            </swiper>
        </div>
        <div class="right-area">
            <div class="container">
                <div class="findItFirst">
                    <h1 class="findItFirst-title">
                        Find it first on Indiegogo.
                    </h1>
                    <div class="findItFirst-description">
                        Discover innovations in tech and design before they go mainstream, including hundreds of
                        products shipping right away.
                    </div>
                    <div class="findItFirst-actions">
                        <a @click="signUpHandler" class="i-cta-1 findItFirst-actions--first-child">
                            Sign up now
                        </a>
                        <a href="/about/what-we-do" class="i-cta-1 i-cta-1--ghost findItFirst-actions--last-child">
                            Learn more
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // require styles
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'

    export default {
        data() {
            return {
                swiperOptionA: {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    autoHeight: true, //enable auto height
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    keyboard: {
                        enabled: true,
                    },
                    /* navigation: {
                       nextEl: '.swiper-button-next',
                       prevEl: '.swiper-button-prev'
                     }*/
                },
                imageList: [
                    {
                        mainTitle: "The Most Interactive Wireless Earbuds",
                        content: "STRØM City hails from the bicycle capital of the world",
                        linkTitle: "Check it out",
                        linkUrl: "http://www.baidu.com",
                        imageUrl: "static/swiper/swiper1.jpg"
                    },
                    {
                        mainTitle: "The Most Interactive Wireless Earbuds",
                        content: "STRØM City hails from the bicycle capital of the world",
                        linkTitle: "Check it out",
                        imageUrl: "static/swiper/swiper2.jpg"
                    },
                    {
                        mainTitle: "The Most Interactive Wireless Earbuds",
                        content: "STRØM City hails from the bicycle capital of the world",
                        linkTitle: "Check it out",
                        imageUrl: "static/swiper/swiper3.jpg"
                    }

                ]
            }
        },

        mounted() {

        },

        components: {
            swiper,
            swiperSlide
        },
        methods: {
            onSetTranslate() {

            },
            signUpHandler() {
                this.$emit("signUpHandlerCallback")
            }
        }
    }
</script>
<style lang="scss" scoped>
    .swiper_container_template {
        height: 400px;
        position: relative;
        .image-gallery {
            height: 400px;
            .single-slide {
                position: relative;
                .content-desc {
                    position: absolute;
                    left: 40px;
                    bottom: 180px;
                    width: 400px;
                    height: 100px;
                    line-height: 18px !important;
                    .border-span {
                        font-size: 16px;
                        font-weight: normal;
                        display: inline-block;
                        color: white;
                        border-bottom: 1px solid #FFFFFF;
                    }
                    .main-title {
                        font-weight: normal;
                        display: inline-block;
                        color: white;
                        font-size: 18px;
                    }
                    .border-content {
                        font-weight: normal;
                        display: inline-block;
                        color: white;
                        font-size: 16px;
                    }
                    .content-span {
                        font-weight: normal;
                        display: inline-block;
                        color: white;
                        font-size: 16px;
                    }
                    .content {
                        font-size: 14px;
                    }
                    .main-title {
                        font-weight: bold;
                    }
                    .link-title {
                        font-weight: bold;
                    }
                }
            }
        }
        .right-area {
            position: absolute;
            z-index: 99;
            right: 0px;
            top: 60px;
            background-color: white;
            width: 600px;
            height: 328px;
            font-size: 14px;
            .container {
                margin: 40px;
                .i-cta-1 {
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-weight: bold;
                    font-size: 14px;
                    line-height: 14px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    display: inline-block;
                    cursor: pointer;
                    background-color: #E51075;
                    border: 2px solid #E51075;
                    padding: 11px 18px;
                    border-radius: 2px;
                    color: #ffffff;
                    text-align: center;
                    min-height: 40px;
                }
                .findItFirst-description {
                    margin: 20px 0;
                }
                h1 {
                    font-size: 36px;
                }
                .findItFirst-actions {
                    padding: 20px 0;
                    a {
                        margin-right: 20px;
                    }
                }
            }
        }
    }
</style>
